<!DOCTYPE html>
<html lang="en">
<head>
<title>用户注册</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="../../staticFile/js/common/mobileCommon.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/common.css">
<style type="text/css">
body{background-color: #efefef;height: auto;}
.user-register{text-align: center;}
.register-phone{text-align: center;margin-top: 0.8rem;}
#registePhone,#lglUserPwd{-webkit-box-shadow: 0 0 0px 1000px white inset;}
.register-phone input{width: 90%;font-size: 0.6rem;line-height: 0.8rem;border: 0.05rem solid white;}
.register-phone .btn-next{background: url(../../staticFile/images/userIndex/menu-spacer.gif) repeat-x;border: 0rem;margin-top: 0.6rem;color: white;font-weight: bolder;}
#errorMsg{text-align: center;background: white;color: red;margin-top: 0.4rem;}
.oth-info{text-align: right;margin-top: 0.4rem;font-size: 0.5rem;}
</style>
<script type="text/javascript" src="../../staticFile/js/common/constant.js"></script>
<script type="text/javascript" src="../../staticFile/js/plugins/encryption/scs_sha1.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/CheckUtil.js"></script>
<script type="text/javascript" src="../../staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="middleMain" class="middle-main">
    <div class="user-register">
        <h4 style="font-size:0.6rem;"><span id="goBack" style="position: fixed;left: 5%;display: none;width: 0.8rem;">&lt;</span>用户注册</h4>
        <hr style="border:none;border-top:0.1rem solid white;" />
    </div>
    <div id="writePhone" class="register-phone">
        <input type="text" id="registePhone" placeholder="请输入手机号码" autocomplete="new-text" />
        <input type="password" autocomplete="new-password" style="display: none;"/>
        <input id="btnPhone" type="button" class="btn-next" disabled value="下一步" style="background: #999988;"/>
        <div class="oth-info">
            <input type="checkbox" onclick="userRegisterAgreement(this)" style="width: 0.5rem;height: 0.5rem;">
            <a id="userAgreement" style="text-decoration:underline;margin-right:5%;" href="mUserRegisterAgreement.html">用户注册协议</a>
        </div>
        <div class="oth-info">
            <a>已有帐号？</a>
            <a style="text-decoration:underline;margin-right:5%;" href="mUserLogin.html">我要登录</a>
        </div>
    </div>
    <div id="writeCheckCode" class="register-phone" style="display: none;">
        <div style="font-size: 0.5rem;">请输入&nbsp;<i id="showRegisterPhone" style="font-weight: bolder;"></i>&nbsp;收到的验证码：</div>
        <input id="checkCode" type="text" placeholder="请输入验证码" style="width: 50%;"/>
        <input type="button" id="btnGetCheckCode" class="btn-next" value="获取验证码" style="width: 40%;font-size: 0.5rem;"/>
        <input id="btnCheckCode" type="button" class="btn-next" value="下一步"/>
    </div>
    <div id="writePwd" class="register-phone" style="display: none;">
        <input type="password" id="loginPassword" placeholder="请输入6-20位登录密码"/>
        <input type="button" id="btnRegisterComplete" class="btn-next" value="完     成"/>
    </div>
    <div id="errorMsg"></div>
</div>

</body>
</html>
<script>
function userRegisterAgreement(ckUserRegisterAgreement){
    if (ckUserRegisterAgreement.checked){
        $('#btnPhone').css('background','url(../../static/images/userIndex/menu-spacer.gif) repeat-x');
        $("#btnPhone").attr("disabled", false);
    }else {
        $('#btnPhone').css('background','#999988');
        $("#btnPhone").attr("disabled", true);
    }
}
$(function(){
    //输入手机号码后的下一步
    $('#btnPhone').click(function(){
        var registePhone = $('#registePhone').val();
        if (registePhone.length != 11){
            showErrorMsg('请输入正确的11位手机号码');
            return;
        }
        //隐藏手机号码框，显示验证码框
        $('#writePhone').hide();
        $('#writeCheckCode').show();
        $('#checkCode').val('');
        $('#goBack').show();
        $('#showRegisterPhone').text($('#registePhone').val());
    });
    $('#btnRegisterComplete').click(function(){
        var pwd = $('#loginPassword').val();
        if (pwd.length < 6){
            showErrorMsg('密码长度不能小于6');
            return;
        }
        if (pwd.length > 20){
            showErrorMsg('密码长度不能大于20');
            return;
        }
        userRegister();
    });
    //输入验证码
    $('#btnCheckCode').click(function(){
        var checkCode = $('#checkCode').val();
        if (checkCode == null || checkCode == ''){
            showErrorMsg('请输入验证码');
            return;
        }
        //隐藏手机号码框，显示验证码框
        $('#writeCheckCode').hide();
        $('#writePwd,#goBack').show();
    });
    //上一步
    $('#goBack').click(function(){
        if (!$("#writeCheckCode").is(":hidden")){
            $('#writePhone').show();
            $("#writeCheckCode,#writePwd,#goBack").hide();
            return;
        }
        if ($("#writeCheckCode").is(":hidden")){
            $('#writePwd,#writePhone').hide();
            $("#writeCheckCode,#goBack").show();
        }
    });
    //获取验证码
    $('#btnGetCheckCode').click(function(){
    	var phone = $('#registePhone').val();
      	if(!phoneNumberIsRight(phone)){
      		showErrorMsg('请输入正确的手机号码');
      		return;
      	}
        var time = 60;//60秒倒计时
        var phoneObj = this;
        phoneObj.disabled = true;
        var checkCodeInterval = window.setInterval(function () {
            time --;
            if (time < 1) {
                window.clearInterval(checkCodeInterval);
                $('#btnGetCheckCode').val('获取验证码');
                //$('#phoneErrorMsg').text('');
                showErrorMsg('');
                phoneObj.disabled = false;
            }else {
                $('#btnGetCheckCode').val(time + '秒后可点击');
            }
        },1000);
        //获取验证码
        goGetCheckCode(checkCodeInterval);
    });
});

//获取验证码
function goGetCheckCode(checkCodeInterval) {
    $.ajax({
        type: "POST",
        url: '/userIndex/user/sendPhoneCheckCode',
        data:{phone: $('#registePhone').val()},
        dataType: 'json',
        async: false,
        success: function(result) {
        	if(result.state == '1'){
        		showErrorMsg('验证码已发送');
        	}else if(result.state == '2'){
        		showErrorMsg('该号码已注册，请重新输入号码');
        	}else if(result.state == '3'){
        		showErrorMsg('当前系统繁忙,请稍后再获取验证码');
        	}else if(result.state == '4'){
        		showErrorMsg('您当前IP地址获取验证码次数过多，请稍候再试');
        	}else if(result.state == '5'){
        		showErrorMsg('您当前手机号码获取验证码次数过多，请稍候再试');
        	}else if(result.state == '6'){
        		showErrorMsg('您输入的手机号码格式不对，请重新输入');
        	}else {
        		showErrorMsg('当前系统繁忙,请稍后再获取验证码');
			}
        	if(result.state != '1'){
        		window.clearInterval(checkCodeInterval);
				$('#btnGetCheckCode').val('获取验证码');
				$('#btnGetCheckCode').disabled = false;
        	}
        },
        error: function() {
        	showErrorMsg('当前系统繁忙,请稍后再获取验证码');
		}
    });
}
function showErrorMsg(emStr){
    $('#errorMsg').text(emStr);
    $('#errorMsg').show();
    var errorTimeout = window.setTimeout(function(){
        $('#errorMsg').hide();
        window.clearTimeout(errorTimeout);
    }, 1000 * 6);
}
/**
 * 用户注册
 */
function userRegister(){
	var mobileNumber = $('#registePhone').val();
	var userPassword = $('#loginPassword').val();
	var checkCode = $('#checkCode').val();
	var shaObj = new jsSHA("SHA-1", "TEXT");
	shaObj.update(userPassword);
	var hashPassword = shaObj.getHash("HEX");
	$.ajax({
        type: "POST",
        url: '/userIndex/user/IamRegister',
        data:{phone: mobileNumber, password: hashPassword, sendMsg: checkCode},
        dataType: 'json',
        async: false,
        success: function(result) {
        	if (result.state == '1') {
        		alert('恭喜您注册成功');
        		sessionStorage.setItem(SCS_USER_NAME, mobileNumber);
        		sessionStorage.setItem(SCS_USER_PHONE, mobileNumber);
        		window.location.href = 'mIndex.html';
			}else if (result.state == '2') {
				alert('该手机号码已被注册');
			}else if (result.state == '3') {
				alert('验证码不正确');
			}else if (result.state == '4') {
				alert('获取手机号码失败');
			}else {
				alert('注册失败');
			}
        },
        error: function () {
        	alert('系统繁忙，请稍候再试');
		}
	});
}
</script>